<template>
  <el-row :gutter="24">
    <el-col :span="12">
      <el-card shadow="always" class="box-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-dropdown>
              <!-- <el-button size="mini" type="danger" @click="handleDelete()">删除</el-button> -->
              <el-button class="sc" type="danger"  size="mini" @click="handleDelete()" >删除</el-button>
              <el-button  class="el-icon-circle-plus" size="mini" type="primary" @click="addEmp()"
                >添加</el-button
              >
            </el-dropdown>
          </el-form-item>
        </el-form>

        <el-tree
          show-checkbox
          :check-strictly="true"
          :default-expanded-all="false"
          node-key="id"
          class="filter-tree"
          :data="menuObj"
          :props="defaultProps"
          default-expand-all
          ref="tree"
          @node-click="clickTree"
          @check="checkBoxFn"
        >
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="12">
      
      <el-card shadow="always" class="box-card">
       
        <div slot="header" class="clearfix">标*为必填项</div>
     
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          :visible.sync="dialogFormVisible"
        >
         <el-form-item label="上级名称">
            <el-input v-model="ruleForm.parentname" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="ruleForm.isId"></el-input>
          </el-form-item>
          <el-form-item label="组织名称"  prop="isName">
            <el-input v-model="ruleForm.isName"></el-input>
          </el-form-item>
          <el-form-item label="组织类型"  prop="isType">
            <el-select
              v-model="ruleForm.isType"
              placeholder="请选择"
              class="dx"
            >
              <el-option label="分公司" :value="1"></el-option>
              <el-option label="一级转运中心" :value="2"></el-option>
              <el-option label="二级转运中心" :value="3"></el-option>
              <el-option label="网点" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址">
            <el-select
              v-model="ruleForm.isProvince"
              placeholder="请选择省"
              @change="provinceChange($event)"
              class="sen"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="item.name"
                :label="item.name"
                :value="index"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="ruleForm.isCity"
              placeholder="请选择市"
              @change="cityChange($event)"
              class="sh"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="item.name"
                :label="item.name"
                :value="index"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="ruleForm.isDistrict"
              placeholder="请选择区"
              @change="addrChange($event)"
              class="q"
            >
              <el-option
                v-for="(item, index) in countyList"
                :key="item.name"
                :label="item.name"
                :value="index"
              >
             </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="isAddress">
            <el-input v-model="ruleForm.isAddress"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="isPhone">
            <el-input v-model="ruleForm.isPhone"></el-input>
          </el-form-item>
          <el-form-item label="简称">
            <el-input v-model="ruleForm.isAbbreviation"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="ruleForm.isDescribe"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-radio-group v-model="ruleForm.isStatus">
              <el-radio label="0">启用</el-radio>
              <el-radio label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number
              v-model="ruleForm.isSort"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="updateAndAdd()">确定</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import mapApi from "/src/mapApi";
import axios from "axios";

export default {
  data() {
    return {
      provinceList: [],
      cityList: [],
      countyList: [],
      bj: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px",
      defaultProps: {
        children: "children",
        label: "cliqueName",
      },

      num: 0,
      ruleForm: {
        parentname: "",
        cliqueParentId: "",
        isId: "",
        isName: "",
        isProvince: "",
        isCity: "",
        isDistrict: "",
        isAbbreviation: "",
        isDescribe: "",
        isAddress: "",
        isType: "",
        isLeadingCadre: "",
        isPhone: "",
        isSort: "",
        isStatus: 0,
      },
      menuObj: {},
      filterText: "",

      ruleForm1: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      rules: {
        isAddress: [{ required: true, message: '请填写组织名称'}],
         isName: [{ required: true, message: '请填写组织名称'}],
          isType: [{ required: true, message: '请选择组织类型'}],
        isPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号码",
          },
        ],
      },
    };
  },
  methods: {
    provinceChange(that) {
      this.ruleForm.isProvince = this.provinceList[that].name;
      this.ruleForm.isCity = "";
      this.ruleForm.isDistrict = "";
      this.cityList = this.provinceList[that].districts;
    },
    cityChange(that) {
      this.ruleForm.isCity = this.cityList[that].name;
      this.countyList = this.cityList[that].districts;
    },
    addrChange(that) {
      this.ruleForm.isDistrict = this.countyList[that].name;
      this.countyList = this.countyList[that].districts;
    },
    //修改删除的状态
    handleDelete(row) {
      //建议使用静态删除 data.splice(index,1)
      var ids = "";
      var aaaa = this.checkBoxFn();
      for (var i = 0; i < aaaa.length; i++) {
        ids += aaaa[i] + ",";
      }
      console.log(ids);
      this.$confirm("确定删除此数据吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.get("/api/update?id=" + ids).then((data) => {
            alert("删除成功");
            this.getEmpList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    checkBoxFn() {
      let checkdata = this.$refs.tree.getCheckedNodes();
      console.log(checkdata);
      let arr = [];
      for (var i = 0; i < checkdata.length; i++) {
        arr.push(checkdata[i].cliqueId);
      }
      return arr;
    },
    //拿到id
    clickTree(v, e) {
      console.log((this.ruleForm.cliqueParentId = v.cliqueId));
      console.log("1212121212");
      this.ruleForm.cliqueParentId = v.cliqueId;
      this.bj = true;
      console.log(v.cliqueId + "------");
      console.log(e.parent.data.cliqueName);
      console.log(v.cliqueName);
      axios.get("/api/findAllid?id=" + v.cliqueId).then((aa) => {
        this.ruleForm = aa.data.institutionsTmsOrgan;
        // this.menuObj = aa.data;
        if (e.parent.data.cliqueName == undefined) {
          this.ruleForm.parentname = "无上级";
        } else {
          this.ruleForm.parentname = e.parent.data.cliqueName;
        }
        console.log(aa.data.institutionsTmsOrgan.isType);
        console.log(this.ruleForm);
      });
    },
    updateAndAdd() {
      if (this.bj) {
        axios
          .post("/api/institutions-tms-organ/update1", this.ruleForm)
          .then((data) => {
            alert("修改成功");
            this.getEmpList();
            this.dialogFormVisible = false;
          });
      } else {
        //添加已成功
        alert(this.bj);
        console.log(this.ruleForm);
        axios
          .post("/api/institutions-tms-organ/insertSelective", this.ruleForm)
          .then((data) => {
            alert("添加成功");
            this.getEmpList();
            this.dialogFormVisible = false;
          });
      }
    },
    //添加
    addEmp() {
      let aa = this.ruleForm.isType;
      let bb = parseInt(this.ruleForm.isId);
      console.log(aa + "----id" + bb);
      if (aa == 4) {
        this.$message({
          message: "网点不能添加下级！！！",
          type: "warning",
        });
      } else {
        this.dialogFormVisible = true;
        this.ruleForm = {
          parentname: "",
          cliqueParentId: "",
          isId: "",
          isName: "",
          isProvince: "",
          isCity: "",
          isDistrict: "",
          isAbbreviation: "",
          isDescribe: "",
          isAddress: "",
          isType: "",
          isLeadingCadre: "",
          isPhone: "",
          isSort: "",
          isStatus: 0,
        };
        this.ruleForm.cliqueParentId = bb;
        this.bj = false;
      }
    },
    //修改
    handleEdit(index, row) {
      this.ruleForm = row;
      this.bj = "true";
      this.dialogFormVisible = true;
    },
    getEmpList() {
      axios.get("/api/findMenuListmanagement").then((aa) => {
        this.menuObj = aa.data;
        console.log(aa.data);
      });
    },
    handleChange(value) {
      console.log(value);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
    onSubmit1() {
      this.getEmpList();
    },

    created() {
      this.getEmpList();
      this.provinceList = mapApi.keyWorlds();
    },
};
</script>

<style scoped>
.el-icon-circle-plus{
   width: 100px;
  height: 40px;
   float: left;
   left: -1px;
   position: relative;
}
.sc{
   width: 100px;
  height: 40px;
   float: left;
   left: 240px;
   position: relative;
}
.clearfix{
   float: left;
   left: 5px;
    font-size: 15px;
    color: #999d9fcf;
   position: relative;
}
.sen {
  position: relative;
  float: left;
  left: 1px;
  width: 120px;
}
.sh {
  position: relative;
  float: left;
  left: 20px;
  width: 120px;
}
.q {
  position: relative;
  float: left;
  left: 40px;
  width: 120px;
}
.dx {
  width: 420px;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.box-card {
  width: 560px;
  height: 830px;
}
</style>


